<template>
  <div class="app-container" v-loading="loading">
    <div class="action-container">
      <el-date-picker
           v-model="searchTime"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           value-format="yyyy-MM-dd">
         </el-date-picker>
      <el-button type="primary" icon="el-icon-search" class="filter-item" @click="search">搜索</el-button>
    </div>
    <div>

      <el-card class="box-card card-style">
        <div class="card-div">
          <div>订单总数</div>
          <div class="card-div-div">{{finance.orderNum}}笔</div>
        </div>
        <div class="card-div">
          <div>总营入</div>
          <div class="card-div-div">{{finance.totalIncome}}元</div>
        </div>
        <div class="card-div">
          <div>现金支付收入</div>
          <div class="card-div-div">{{finance.cash}}元</div>
        </div>
        <div class="card-div-no-border">
          <div>在线支付收入</div>
          <div class="card-div-div">{{finance.onlineMoney}}元</div>
        </div>
      </el-card>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="日订单总数(笔)">
      </el-table-column>
      <el-table-column
        prop="sumMoney"
        label="日总营收(元)">
      </el-table-column>
    </el-table>
    <pagination
      :total-elements="totalElements"
      :change-callback="ordernumAndMoney"
      ref="page"></pagination>

  </div>
</template>

<script>
  import {ordernumAndMoney,financialBusiness} from '../api/datareport'
  import pagination from '@/components/pagination/index'

  export default {
    components: { pagination },
    name: 'finance',
    data () {
      return {
        loading: false,
        btnLoading: false,
        multipleSelection: [], // 选中数据-多选
        totalElements: 0, // 数据条数
        tableData: [], // 表格数据
        formLabelWidth: '120px',
      }
    },
    mounted () {
      this.initTime();
      this.ordernumAndMoney()
      this.financialBusiness ()
    },
    methods: {
      initTime(){
        let date1 = new Date()
        let date = new Date(date1+1000 * 60 * 60 * 24);
        let end = date.getFullYear() +'-'+(date.getMonth()+1 ) + '-'+ date.getDate();
        let lw = new Date(date - 1000 * 60 * 60 * 24 * 30);
        let lastY = lw.getFullYear();
        let lastM = lw.getMonth()+1;
        let lastD = lw.getDate();
        let start = lastY+"-"+(lastM<10 ? "0" + lastM : lastM)+"-"+(lastD<10 ? "0"+ lastD : lastD);
        this.searchTime = [start,end];
      },
      ordernumAndMoney () {
        this.loading = true
        ordernumAndMoney().then(response => {
          let data = response.obj
          console.log(data);
          this.finance = data
          this.finance.totalIncome=this.finance.cash+this.finance.onlineMoney
          setTimeout(() => {
            this.loading = false
          }, 500)
        }).catch(() => {
          this.loading = false
        })
      },
      financialBusiness () {
        this.loading = true
        financialBusiness(this.searchTime[0],this.searchTime[1]).then(response=>{
          let data = response.obj
          this.tableData = data
          setTimeout(() => {
            this.loading = false
          }, 500)
        }).catch(()=>{
          this.loading = false
        })
      },
      search(){
        this.financialBusiness ()
        console.log(this.searchTime);

      },
      refresh () {
        this.$refs.page.refresh()
      },
    },
  }
</script>

<style scoped>
  body .el-table th.gutter {
    display: table-cell !important;
  }
  .card-style {
    width: 1000px;
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;
    margin-left: 0px;
    margin-bottom: 40px;
    justify-content: space-between

  }
  .card-div {
    width: 190px;
    text-align: center;
    display: inline-block;
    border-right: 1px solid rgb(246,246,246);
  }
  .card-div-no-border {
    margin-bottom: 10px;
    width: 190px;
    text-align: center;
    display: inline-block;
  }
  .card-div-div {
    font-size: 25px;
    padding-top: 30px;
  }
  .big-span {
    font-size: 25px
  }
  .el-card>>>.el-card__header {
    padding: 15px 0px 15px 0;
    background-color: rgb(231,231,231);
  }
  .table-date>>>.el-card__body {
    padding: 0px;
  }
</style>
